<template>
  <div class="legal-entity">
    <Header :storeName="infoData.store" :website="infoData.website" />
    <div class="container">
      <div class="head-wrap">
        <h2>Legal Entity</h2>
        <div class="a-info">Account Info</div>
      </div>
      <div class="successAlert">
        <div class="a-box">
          <i class="a-icon"></i>
          <div class="a-content">
            <p class="p1">Tax information is complete</p>
            <p class="p2">Your tax information has been validated successfully.</p>
            <div class="a-bto">
              <div class="btn">Update Tax Information </div>
              <div class="tip">Tax interview help guide</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bannerMessageFooter">
        To update legal entity name or address, you must retake the tax interview by clicking on "Update Tax Information"
      </div>
      <div class="panel-wrap">
        <div class="title">Legal business name</div>
        <ul>
          <li>{{infoData.legal_business_name}}</li>
        </ul>
      </div>
      <div class="panel-wrap">
        <div class="title">Place of establishment address</div>
        <ul style="margin-bottom:12px">
          <li>{{infoData.address_line1}}</li>
          <li>{{infoData.address_line2}}</li>
          <li>{{infoData.address_line3}}</li>
          <li>{{infoData.zip}}</li>
        </ul>
      </div>
      <div class="back-btn">Back</div>
    </div>
    <Footer></Footer>
    <Feedback></Feedback>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import Feedback from '@/components/Feedback.vue'
import { get_amazon_datas } from '@/api/index.js'
export default {
  components: { Header, Footer, Feedback },
  data () {
    return {
      infoData: {}
    }
  },
  mounted () {
    this.get_amazon_datas()
  },
  methods: {
    get_amazon_datas () {
      get_amazon_datas().then(res => {
        this.infoData = res.legal_entity
      })
    }
  }
}
</script>

<style lang="less" scoped>
.legal-entity {
  .container {
    width: 50%;
    padding: 18px 22px;
    .head-wrap{
      display: flex;
      justify-content: space-between;
      height: 41px;
      border-bottom: 1px solid #e7e7e7;
      h2{
        font-weight: 700;
        font-size: 24px;
        line-height: 32px;
      }
      .a-info{
        color: #007185;
        margin-top: 4px;
      }
    }
    .successAlert{
      border: 2px solid #067D62;
      border-left-width: 12px;
      border-radius: 8px;
      background-color: #fff;
      margin-top: 30px;
      .a-box{
        padding: 14px 18px 18px;
        position: relative;
        .a-icon{
          background-image: url(../../assets/images/amz_star.png);
          background-size: 512px 512px;
          background-repeat: no-repeat;
          display: inline-block;
          height: 18px;
          width: 18px;
          position: absolute;
          left: 18px;
          top: 14px;
          background-position: -84px -138px;
        }
        .a-content{
          padding-left: 26px;
          margin-bottom: 10px;
          .p1{
            color: #007600!important;
            font-size: 18px;
            line-height: 24px;
          }
          .p2{
            color: #0F1111;
            font-size: 14px;
            line-height: 20px;
          }
          .a-bto{
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .btn{
              width: 162px;
              text-align: center;
              line-height: 30px;
              border-radius: 8px;
              box-shadow: 0 2px 5px 0 rgba(213,217,217,.5);
              border: 1px solid #D5D9D9;
              font-size: 13px;
            }
            .tip{
              text-decoration: none;
              color: #007185;
            }
          }
        }
      }
    }
    .bannerMessageFooter{
      padding: 10px 14px;
      line-height: 20px;
      margin-bottom: 22px;
    }
    .panel-wrap{
      border-radius: 8px;
      position: relative;
      padding: 14px 18px;
      background-color: #f0f2f2;
      & + .panel-wrap{
        margin-top: 14px;
      }
      .title{
        font-weight: 700;
        line-height: 20px;
        margin-bottom: 8px;
      }
      ul{
        li{
          line-height: 20px;
        }
      }
    }
    .back-btn{
      margin-top: 8px;
      width: 375px;
      text-align: center;
      line-height: 30px;
      box-shadow: 0 2px 5px 0 rgba(213,217,217,.5);
      border-radius: 8px;
      border: 1px solid #D5D9D9;
      margin-bottom: 20px;
    }
  }
}
</style>
